<template>
  <view class="history-container">
    <view v-if="loading" class="loading">
      <view class="loading-spinner"></view>
      <text>加载中...</text>
    </view>
    
    <view v-else-if="histories.length === 0" class="empty">
      <image class="empty-img" src="/static/empty-history.png" mode="aspectFit"></image>
      <text class="empty-text">暂无兑换记录</text>
    </view>
    
    <scroll-view v-else scroll-y class="history-list">
      <view 
        v-for="item in histories" 
        :key="item._id" 
        class="history-item"
      >
        <!-- 修正图片绑定 -->
        <image 
          v-if="getItemImage(item)"
          :src="getItemImage(item)" 
          class="item-image"
          mode="aspectFill"
        ></image>
        <view class="info">
          <text class="name">{{ item.item_name }}</text>
          <view class="meta-line">
            <text class="time">{{ item.exchange_time }}</text>
            <text class="points">-{{ item.points }}积分</text>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      histories: [],
      loading: false
    }
  },
  methods: {
    // 新增方法：获取商品图片
    getItemImage(item) {
      return item?.item_info?.[0]?.image || null;
    },
    
    async loadHistory() {
      this.loading = true;
      try {
        const user = uni.getStorageSync('user');
        const res = await uniCloud.callFunction({
          name: 'getExchangeHistory',
          data: { user_id: user.id }
        });
        
        if (res.result.code === 0) {
          this.histories = res.result.data;
          console.log('数据加载成功:', this.histories);
        }
      } catch (e) {
        console.error('加载失败:', e);
      } finally {
        this.loading = false;
      }
    }
  },
  onLoad() {
    this.loadHistory();
  }
}
</script>

<style scoped>
/* 保持原有样式不变 */
.history-container {
  padding: 20rpx;
  min-height: 100vh;
  background-color: #f8f8f8;
}

.loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 100rpx 0;
}

.loading-spinner {
  width: 60rpx;
  height: 60rpx;
  border: 6rpx solid rgba(74, 144, 226, 0.2);
  border-top-color: #4a90e2;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 20rpx;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 100rpx 0;
}

.empty-img {
  width: 300rpx;
  height: 300rpx;
  margin-bottom: 30rpx;
  opacity: 0.8;
}

.empty-text {
  font-size: 32rpx;
  color: #999;
}

.history-list {
  height: calc(100vh - 40rpx);
}

.history-item {
  display: flex;
  padding: 24rpx;
  margin-bottom: 16rpx;
  background-color: #fff;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
}

.item-image {
  width: 140rpx;
  height: 140rpx;
  border-radius: 12rpx;
  background-color: #f5f5f5;
}

.info {
  flex: 1;
  margin-left: 24rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.name {
  font-size: 30rpx;
  font-weight: 500;
  color: #333;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.meta-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.time {
  font-size: 24rpx;
  color: #999;
}

.points {
  font-size: 28rpx;
  color: #FF5500;
  font-weight: bold;
}
</style>